<template>
  <div :class="$style['question-card-warpper']">
    <div :class="$style['question-card-title']">
      <span> {{ order }}、{{ title }} </span>
      <span :class="$style['question-card-subTitle']">（{{ typeName }}）</span>
    </div>
    <div>
      <!-- 选择题 -->
      <paper-option-group
        v-if="this.type !== 6 && this.type !== 8 && this.type !== 9"
        :options="optionGroupData"
        :type="optionGroupType"
        :values="value ? value : undefined"
        @change="onValuesChange"
      />
      <!-- 滑条题 -->
      <paper-slider
        v-if="this.type === 6"
        :min="sliderData.min"
        :max="sliderData.max"
        :minContent="sliderData.minContent"
        :maxContent="sliderData.maxContent"
        :class="$style['slider-warpper']"
        :value="value ? Number(value[0]) : undefined"
        @change="onValuesChange"
      />
      <!-- 单行输入框  -->
      <paper-input
        v-if="this.type === 8"
        :class="$style['paper-input-top']"
        :value="value ? value[0] : undefined"
        @change="onValuesChange"
      />
      <!-- 多行输入框 -->
      <paper-textarea
        v-if="this.type === 9"
        :class="$style['paper-input-top']"
        :value="value ? value[0] : undefined"
        @change="onValuesChange"
      />
    </div>
  </div>
</template>

<script>
import OptionGroup from '@/components/option-group/option-group';
import PaperSlider from '@/components/paper-slider/paper-slider';
import PaperInput from '@/components/paper-input/paper-input';
import PaperTextArea from '@/components/paper-textarea/paper-textarea';
import { getStrAZ } from '@/helpers';
export default {
  name: 'QuestionCard',
  components: {
    'paper-option-group': OptionGroup,
    'paper-slider': PaperSlider,
    'paper-input': PaperInput,
    'paper-textarea': PaperTextArea,
  },
  props: {
    order: {
      type: String,
      default: '',
      require: true,
    },
    title: {
      type: String,
      default: '',
      require: true,
    },
    options: {
      type: Array,
    },
    type: {
      type: Number,
      require: true,
    },
    sliderData: {
      type: Object,
    },
    qid: {
      type: Number,
    },
    value: {
      type: Array,
    },
  },
  data() {
    return {};
  },
  computed: {
    optionGroupData() {
      let text = '';
      let name = '';
      return this.options.map((item, i) => {
        // 只有单选题和多选题才需要将text设置未ABCD
        if (this.type === 1 || this.type === 2) {
          text = getStrAZ(i);
        }
        // 只有单选评分和多选评分需要加上分数的显示
        if (this.type === 4 || this.type === 5) {
          name = `${item.name}(${item.score}分)`;
        } else {
          name = item.name;
        }
        return {
          name: name,
          text: text,
          // value就是每个选项对应的uuid
          value: item.uuid,
        };
      });
    },
    optionGroupType() {
      let result = '';
      // 对类型做一个转换,然后再赋值给option-group组件
      if (this.type === 2 || this.type === 5) {
        result = 'checkbox';
      } else if (this.type === 1 || this.type === 3 || this.type === 4) {
        result = 'radio';
      } else if (this.type === 7) {
        result = 'sort';
      }
      return result;
    },
    typeName() {
      const typeNameArray = [
        '-',
        '单选',
        '多选',
        '量表',
        '单选评分题',
        '多选评分题',
        '滑条',
        '排序题',
        '单行输入',
        '多行输入',
      ];
      // 根据类型显示题目类型
      return typeNameArray[this.type] || '';
    },
  },
  methods: {
    onValuesChange(value, isCompelete) {
      let compelete = isCompelete;
      // 对题目是否完成进行逻辑判断
      // 单行填空和多行天空
      if (this.type === 8 || this.type === 9) {
        value.length > 0 ? (compelete = true) : (compelete = false);
      }
      // 滑条题默认就是完成
      if (this.type === 6) {
        compelete = true;
      }
      this.$emit('answer', value, compelete, this.qid);
    },
  },
};
</script>

<style lang="less" module>
@import '../../global.less';
.question-card-warpper {
  background: #fff;
  padding: 20px;
  margin: 10px 0;
  border-radius: 6px;
}

.question-card-title {
  color: @title-color;
  font-size: 14px;
  line-height: 22px;
}

.question-card-subTitle {
  color: @subtitle-color;
}

.slider-warpper {
  margin-top: 54px;
}

.paper-input-top {
  margin-top: 15px;
}
</style>
